import React, {Component} from 'react';
import {Input, Form, Radio, TreeSelect, message, Select} from "antd";
import Ajax from "../../util/AjaxUtil";
import qs from 'qs';

class UserInfoForm extends Component {

    constructor(props) {
        super(props);

        this.state = {
            treeData: [],
            deptId:null,
            roleList:[]
        }
    }

    render() {
        let instance = this;
        const {getFieldDecorator} = this.props.form;
        return (
            <Form>
                <Form.Item label={"用户名"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                    {getFieldDecorator("username", {
                        rules: [{
                            required: true, validator: (rule, value, callback) => {
                                if (value === null || value.length === 0) {
                                    callback('用户名不能为空');
                                }
                                instance.usernameOccupation(value,
                                    instance.props.userInfo ? instance.props.userInfo.id : null,
                                    callback, instance);
                                callback();
                            }
                        }],
                        initialValue: this.props.userInfo ? this.props.userInfo.username : null
                    })(
                        <Input size={'small'}/>
                    )}
                </Form.Item>
                <Form.Item label={"真实姓名"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                    {getFieldDecorator("realName", {
                        rules: [{max: 10, min: 1, required: false}],
                        initialValue: this.props.userInfo ? this.props.userInfo.realName : null
                    })(
                        <Input size={'small'}/>
                    )}
                </Form.Item>
                <Form.Item label={"部门"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                    {getFieldDecorator("deptId",{
                        initialValue: this.state.deptId
                    })(
                        <TreeSelect
                            dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
                            placeholder="请选择部门"
                            treeDefaultExpandAll
                            treeData={this.state.treeData}
                        />
                    )}
                </Form.Item>
                <Form.Item label={"角色"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                    {getFieldDecorator("roleIds",{
                        initialValue:this.state.roleIds
                    })(
                        <Select mode="multiple"
                                placeholder="请选择角色">
                            {this.state.roleList.map(item=>{
                                return (<Select.Option value={item.id}>{item.name}</Select.Option>)
                            })}
                        </Select>
                    )}
                </Form.Item>
                <Form.Item label={"性别"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                    {getFieldDecorator("sex", {
                        initialValue: this.props.userInfo ? this.props.userInfo.sex : 1
                    })(
                        <Radio.Group>
                            <Radio value={1}>男</Radio>
                            <Radio value={0}>女</Radio>
                        </Radio.Group>
                    )}
                </Form.Item>
                <Form.Item label={"手机号"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                    {getFieldDecorator("phone", {
                        rules: [{required: false, pattern: /^1(3|4|5|7|8)\d{9}$/, message: '手机号不合法'}],
                        initialValue: this.props.userInfo ? this.props.userInfo.phone : null
                    })(
                        <Input size={'small'}/>
                    )}
                </Form.Item>
                <Form.Item label={"邮箱"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                    {getFieldDecorator("email", {
                        rules: [{required: false, type: 'email'}],
                        initialValue: this.props.userInfo ? this.props.userInfo.email : null
                    })(
                        <Input size={'small'}/>
                    )}
                </Form.Item>
                <Form.Item label={"个人简介"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                    {getFieldDecorator("about", {
                        initialValue: this.props.userInfo ? this.props.userInfo.about : null
                    })(
                        <Input.TextArea size={'small'}/>
                    )}
                </Form.Item>
            </Form>
        )
    }

    componentDidMount() {
        this.props.userInfoModalForm(this.props.form);

        let instance = this;
        Ajax.post("/userCenter/department/findAllDepartmentTree")
            .then((response) => {
                let data = [];
                data.push(response.data);
                this.setRowDatas(data[0]);
                instance.setState({
                    treeData: data
                }, ()=> {
                    if (instance.props.userInfo) {
                        let userId = instance.props.userInfo.id;
                        Ajax.post("/userCenter/user/findDeptId",qs.stringify({userId:userId}))
                            .then((response)=>{
                                if (response.data.result){
                                    instance.setState({
                                        deptId:response.data.data
                                    });
                                }
                            }).catch(error=>{
                            message.error("获取数据失败");
                        })
                    }
                });
            })
            .catch((error) => {
                message.error("获取数据失败");
            });

        Ajax.post("/userCenter/role/findAllRole")
            .then((resource) => {
                resource.data.map((item) => {
                    item.key = item.id;
                    return item;
                });
                instance.setState({
                    roleList: resource.data,
                }, ()=>{
                    if (instance.props.userInfo){
                        let userId = instance.props.userInfo.id;
                        Ajax.post("/userCenter/user/findRoleIds",qs.stringify({userId:userId}))
                            .then((response)=>{
                                if (response.data.result){
                                    instance.setState({
                                        roleIds:response.data.data
                                    });
                                }
                            }).catch(error=>{
                            message.error("获取数据失败");
                        })
                    }
                });
            })
            .catch((error) => {
                message.error("获取数据失败");
            });
    }

    setRowDatas(data) {
        data.title = data.name;
        data.value = data.id;
        data.key = data.id;
        if (data.children && data.children.length > 0) {
            data.children.map((item, key, map) => {
                this.setRowDatas(item);
                return item;
            });
        }
    }

    usernameOccupation(username, id, callback, instance) {
        Ajax.post('/userCenter/user/usernameOccupation', qs.stringify({
            username: username,
            id: instance.props.userInfo ? instance.props.userInfo.id : null
        })).then((response) => {
            if (response.data.result) {
                callback('该用户名已被占用');
            }
        });

    }
}

export default Form.create()(UserInfoForm);